<template>

    <mu-container class="profilePaper">
      <mu-row>
        <mu-appbar class="profileAppBar" color="primary">
          <mu-icon value="contacts" slot="left"></mu-icon>
          修改个人资料
        </mu-appbar>
      </mu-row>
      <mu-row>
        <mu-col span="12">
          <mu-card class="ProfileCard" raised>
            <mu-card-header :title="'用户名： ' + validateForm.username" :sub-title="'用户ID号:  ' + validateForm.userId">
              <mu-avatar slot="avatar">
                <mu-icon value="person"></mu-icon>
              </mu-avatar>
            </mu-card-header>
            <mu-card-text>
              <mu-form ref="form" :model="validateForm" label-position="left" label-width="100" class="mu-demo-form">
                <mu-card-text>
                  <mu-form-item label="用户名" help-text="" prop="username" :rules="rules.notNull">
                    <mu-text-field v-model="validateForm.username"></mu-text-field>
                  </mu-form-item>
<!--                  <mu-form-item label="密码" prop="password" :rules="rules.password">-->
<!--                    <mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>-->
<!--                  </mu-form-item>-->
<!--                  <mu-form-item label="确认密码" prop="password2" :rules="rules.password2">-->
<!--                    <mu-text-field type="password" v-model="validateForm.password2"  prop="password2"></mu-text-field>-->
<!--                  </mu-form-item>-->
                  <mu-form-item label="姓名" help-text="" prop="name" :rules="rules.notNull">
                    <mu-text-field v-model="validateForm.name"></mu-text-field>
                  </mu-form-item>
                  <mu-form-item prop="gender" label="性别"  :rules="rules.notNull">
                    <mu-radio v-model="validateForm.gender" value="男" label="男"></mu-radio>
                    <mu-radio v-model="validateForm.gender" value="女" label="女"></mu-radio>
                  </mu-form-item>
                  <mu-form-item label="电子邮箱" help-text="" prop="email" :rules="rules.mail" >
                    <mu-text-field v-model="validateForm.email"></mu-text-field>
                  </mu-form-item>
                  <mu-form-item label="手机号" help-text="" prop="phone" :rules="rules.phone" >
                    <mu-text-field v-model="validateForm.phone"></mu-text-field>
                  </mu-form-item>
                  <mu-form-item label="地址" help-text="" prop="address" :rules="rules.notNull">
                    <mu-text-field v-model="validateForm.address"></mu-text-field>
                  </mu-form-item>
                  <mu-form-item label="身份证号" help-text="" prop="idcard" :rules="rules.idCard">
                    <mu-text-field v-model="validateForm.idcard"></mu-text-field>
                  </mu-form-item>
<!--                  <mu-form-item label="支付密码" help-text="" prop="paypassword" :rules="rules.paypassword">-->
<!--                    <mu-text-field v-model="validateForm.paypassword"></mu-text-field>-->
<!--                  </mu-form-item>-->

                </mu-card-text>
                <mu-card-actions>
                  <mu-form-item>
                    <mu-button color="secondary" @click="submit">修改</mu-button>
                    <mu-button @click="navigateTo('/myProfile')">返回</mu-button>
                  </mu-form-item>
                </mu-card-actions>
              </mu-form>
            </mu-card-text>
          </mu-card>
        </mu-col>
      </mu-row>
    </mu-container>

</template>

<script>

import Cookie from 'js-cookie'
import {getUserInfo, userUpdate} from "@/api/user";

    export default {
        name: "MyProfileUpdate",
      data () {
        return {
          validateForm: {
            id: Cookie.get("user_id"),
            username: null,
            // password: '',
            // password2: '',
            name: '',
            gender: '男',
            phone: '',
            email: '',
            address: '',
            idcard: '',
            // paypassword: ''
          },
          rules: {
            notNull: [
              { validate: (val) => !!val, message: '请输入信息', trigger: 'blur' },
            ],
            // password: [
            //   { validate: (val) => !!val, message: '请输入密码', trigger: 'blur' },
            // ],
            // password2: [
            //   { validate: (val) => !!val, message: '请再次输入密码', trigger: 'blur' },
            //   { validate: (val) => val === this.validateForm.password ,message: '输入的两次密码不一致' }
            // ],
            phone: [
              { validate: (val) => !!val, message: '请输入您的电话号码', trigger: 'blur' },
              { validate: (val) => /^1[3|5|7|8|9]\d{9}$/.test(val), message: '请输入正确的号码格式', trigger: 'blur' },
            ],
            mail: [
              { validate: (val) => !!val, message: '请输入您的邮箱', trigger: 'blur' },
              { validate: (val) => /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val), message: '请输入正确的邮箱格式', trigger: 'blur' },
            ],
            idCard: [
              { validate: (val) => !!val, message: '请输入您的身份证', trigger: 'blur' },
              { validate: (val) => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val), message: '请输入正确的身份证格式', trigger: 'blur' },
            ],
            // paypassword: [
            //   { validate: (val) => !!val, message: '请输入您的支付密码', trigger: 'blur' },
            //   { validate: (val) => /^\d{6}$/.test(val), message: '请输入6位数字', trigger: 'blur' },
            // ]
          },
          userId: null,
          btnLoading: false
        }
      },
      created() {
        this.fetchData();
      },
      methods: {
        fetchData(){
          getUserInfo().then(res => {
            this.validateForm = res.data;
          }).catch(err => {
            this.$toast.error(err)
          })
        },
        submit () {
          this.$refs.form.validate().then((result) => {
            console.log(result)
            if (result == false) {
              this.$toast.warning("请输入必填项！")
              return
            }else {
              this.update()
            }
          });
        },
        clear () {
          this.$refs.form.clear();
          this.validateForm = {
            username: '',
            password: '',
            password2: '',
            name: '',
            gender: '男',
            phone: '',
            email: '',
            address: '',
            idcard: '',
            paypassword: ''
          };
        },
        navigateTo(val){
          this.$router.push(val);
        },
        update() {
          // this.btnLoading = true
          userUpdate(this.validateForm).then(res => {
            if (res.code === 1000){
              this.$toast.success("修改成功")
              this.navigateTo('/myProfile')
            }else {
              this.$toast.message("请检查信息是否填写正确")
            }
          }).catch(err => {
            this.$toast.message("修改失败：" + err.toString())
          })
        },
      }
    }
</script>

<style scoped>
  .login-container{
    width: 100%;
    background-image: linear-gradient(270deg,#8146b4,#6990f6);
    padding: 8px;
  }
  .mu-demo-form {
    width: 100%;
    /*max-width: 460px;*/
  }
  .login-card{
    width: 100%;
    max-width: 80%;
    margin: 50px auto;
  }
  .profileAppBar{
    height: 40px;
    width: auto!important;
    border-radius: 35px;
    margin: 10px;
    color: #fff;
    padding: 10px;
  }
  .profilePaper{
    padding: 10px;
  }
  .ProfileCard{
    width: 100%;
    margin: 0 auto;
  }
</style>
